<template>
  <el-dialog
    :title="'选择绑定的溯源'"
    :visible.sync="dialogVisible"
    width="1000px"
    :before-close="dialogBeforeClose"
    append-to-body
    class="dialog"
  >
    <div class="searchBox">
      <!-- <el-select
        v-model="params.NS"
        class="searchInp"
        placeholder="请选择农事类型"
        filterable
        clearable
        disabled
        @change="NsChange"
      >
        <el-option
          v-for="item in missionTypes"
          :key="item.id"
          :label="item.name"
          :value="item.code"
        >
        </el-option>
      </el-select> -->
      <div>
        <el-select
          v-model="params.landId"
          popper-class="selectInp"
          :popper-append-to-body="false"
          class="searchInp"
          placeholder="请选择地块"
          filterable
          clearable
          @change="landChange"
        >
          <el-option
            v-for="item in landList"
            :key="item.landId"
            :label="item.landName"
            :value="item.landId"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="NS"
          disabled
          popper-class="selectInp"
          @change="landChange"
          :popper-append-to-body="false"
          class="searchInp"
          placeholder="请选择种植种类"
          clearable
        >
          <el-option
            v-for="item in missionTypes"
            :key="item.id"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <el-date-picker
          v-model="dateValue"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeDate"
        >
        </el-date-picker>
      </div>
    </div>
    <!-- 列表 -->
    <div class="tableGreenBox mt20">
      <el-table
        class="tableGreen"
        :data="tableList"
        style="width: 100%"
      >
      <el-table-column label="种类-品种" header-align="center" align="center" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.seedInfo ?`${scope.row.agriculturalTypeName} - ${scope.row.seedInfo}`  : scope.row.agriculturalTypeName }}</span>
        </template>
      </el-table-column>
        <el-table-column label="地块" header-align="center" align="center" width="180">
          <template>
            <span>{{ landName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="重量" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.num === null ? '-' : `${scope.row.num} 公斤` }} </span>
          </template>
        </el-table-column>
        <el-table-column label="采收时间" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作人" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.participants }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center" >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              class="greenButton"
              :disabled="detailIds.includes(scope.row.id)"
              @click="openDetail(scope.row)"
              >绑定</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="8"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :visible.sync="dialogBind"
      :before-close="dialogBeforeCloseBind"
      append-to-body
      width="400px"
      class="bindDialog"
    >
      <template #title></template>
      <div class="bindTitle">确定绑定这条采收记录?</div>
      <div class="bindLogo">
        <div>种类名称：{{detail.seedInfo ?`${detail.agriculturalTypeName} - ${detail.seedInfo}`  : detail.agriculturalTypeName }}</div>
        <div>地块名称：{{ landName }}</div>
        <div>采收时间：{{ detail.time }}</div>
      </div>
      <div class="bindBottom">
        <el-button
          size="small"
          class="editBtn editBtnNone"
          @click="dialogBeforeCloseBind(1)"
          >取消</el-button
        >
        <el-button
          class="editBtn"
          type="primary"
          size="small"
          @click="dialogTraceability()"
        >
          确定
        </el-button>
      </div>
      <!-- <div class="bindBtn">
        <el-button size="small" round @click="dialogBeforeCloseBind(1)">取消</el-button>
        <el-button size="small" type="success" round @click="dialogTraceability()">确定</el-button>
      </div> -->
    </el-dialog>
  </el-dialog>
</template>

<script>
import { getLandDetailApi } from '@/api/agriLand'
import { getSysSonDictListApi } from '@/api/dict'
import { getAgriListByTimeApi } from '@/api/mission'

// import farmStockDialog from './components/farmStockDialog'
export default {
  name: 'AgriLandList',
  components: {
  },

  data () {
    return {
      dialogVisible: false,
      dialogBind: false,
      landParams: {
        baseId: 1,
        landId: ''
      },
      params: {
        baseId: 1,
        landId: '',
        NS: 'NS_CZ1',
        startTime: '',
        endTime: '',
        plantingVariety: ''
      },
      NS: 'NS_CZ',
      plantingVarietys: null,
      landList: [],
      landStates: [
        { value: '空闲中', label: 0 },
        { value: '种植中', label: 1 }
      ],
      valueArea: '',
      currentPage: 1,
      dateValue: '',
      tableData: [],
      missions: [],
      dialogImageUrl: '',
      total: 0,
      landMissionData: [],
      detail: {},
      detailCheckList: [],
      missionTypes: []
    }
  },
  computed: {
    tableList () {
      const tableList = this.missions.slice((this.currentPage - 1) * 8, this.currentPage * 8)
      this.total = this.missions.length
      return tableList
    },
    landName () {
      let landName = null
      this.landList.map(item => {
        if (item.landId === this.params.landId) {
          landName = item.landName
        }
      })
      return landName
    },
    detailIds () {
      const ids = []
      this.detailCheckList.map(item => {
        ids.push(item.id)
      })
      return ids
    }
  },
  created () {
    this.landParams.baseId = this.$store.getters.userInfo.baseId
    this.params.baseId = this.$store.getters.userInfo.baseId
  },

  methods: {
    // 显示绑定数据
    openShow (list) {
      this.detailCheckList = list
      this.dialogVisible = true
      this.getSysSonDictList()
    },
    // 获取绑定溯源详情
    openDetail (item) {
      // for (let i = 0; i < this.detailCheckList.length; i++) {
      //   if (this.detailCheckList[i].landId !== this.params.landId) {
      //     this.$message.error('已绑定其他地块溯源数据')
      //     return
      //   }
      // }
      this.$set(this, 'detail', item)
      this.dialogBind = true
    },
    // 关闭详情
    dialogBeforeCloseBind (type) {
      this.dialogBind = false
      if (!type) {
        this.dialogBeforeClose()
      }
    },
    dialogTraceability () {
      this.dialogBeforeCloseBind()
      this.$parent.showDetail({
        ...this.detail,
        jsonData: this.detail,
        landName: this.landName,
        landId: this.params.landId
      })
    },
    // 关闭
    dialogBeforeClose () {
      this.dialogVisible = false
    },
    // 数据处理
    changeData () {
      this.missions = this.landMissionData
      for (let i = 0; i < this.missions.length; i++) {
        if (
          this.missions[i].picture !== '' &&
          this.missions[i].picture !== null &&
          this.missions[i].picture !== undefined
        ) {
          this.missions[i].picture = this.landMissionData[i].picture
            .split(',')
            .map((picture) => picture)
        } else {
          this.missions[i].picture = []
        }
      }
    },
    // 查询农事
    async getAgriListByTime (params) {
      if (params.landId === '') {
        this.$message.error('暂无地块')
      } else {
        params.NS = 'NS_CZ1'
        const res = await getAgriListByTimeApi(params)
        this.landMissionData = res.data
        this.changeData()
      }
    },
    // 字典
    async getSysSonDictList () {
      // 地块
      const res = await getLandDetailApi(this.landParams)
      this.landList = res.data
      // 获取地块名称
      this.$parent.landNameGet(this.landList)
      // 地块类型
      const res2 = await getSysSonDictListApi('NS')
      // console.log(res2.data)
      this.missionTypes = res2.data
      if (this.landList.length !== 0) {
        this.params.landId = this.landList[0].landId
        this.getAgriListByTime(this.params)
      } else {
        this.$message.error('暂无地块')
      }
    },
    changeDate (e) {
      this.currentPage = 1
      if (e === null) {
        this.params.startTime = ''
        this.params.endTime = ''
        this.getAgriListByTime(this.params)
      } else {
        this.params.startTime = e[0]
        this.params.endTime = e[1]
        this.getAgriListByTime(this.params)
      }
    },
    NsChange () {
      this.currentPage = 1
      this.getAgriListByTime(this.params)
    },
    landChange () {
      this.currentPage = 1
      this.getAgriListByTime(this.params)
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog__body {
  padding: 10px 20px 20px 20px;
}
.searchBox {
  font-weight: 600;
  margin-bottom: 1.5vh;
  width: 100%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .searchInp {
    width: 180px;
    height: 0.75rem * 0.834;
    margin-right: 1vw;
  }
  .searchBtn {
    background-color: #6adfae;
    border: #80efb1;
    font-weight: 600;
    width: 5.8333vw;
    height: 3.125vw * 0.834;
  }
  .searchBtn:hover {
    background-color: #80efb1;
  }
}
.back {
  position: absolute;
  top: 5%;
  left: 5%;
}
.name {
  display: inline-block;
  ::v-deep .el-form-item__content {
    display: flex;
  }
  .addBtn {
    margin-left: .5208vw;
  }
}
.tableAuto {
  overflow-y: auto;
  height: 5rem;
}
.tableList {
  height: 6rem;
  overflow: auto;
}
.pagination {
  margin-top: 1.5625vw *0.834;
  text-align: right;
}
::-webkit-scrollbar {
    width: 0;
}
::-webkit-scrollbar-track {
    // background-color: red;
    background-color: #fff;
    border-radius: 0.15vw;
}
::-webkit-scrollbar-track-piece{
    background-color: #fff;
    border-radius: 0.15vw;
}
::-webkit-scrollbar-thumb{
    background-color: #fff;
    border-radius: 0.15vw;
}
.flexBtn {
    padding-top: 0.2rem;
    border-top: 1px solid #CCCCCC;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bindDialog {
  ::v-deep .el-dialog__header {
    display: none;
  }
  ::v-deep .el-dialog__body {
    padding: 40px 0px 85px 20px;
    position: relative;
  }
  .bindBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.2rem 0;
    border-top: 1px solid #eaeaea;
    .editBtn {
      background: #00C586;
      border-radius: 3px;
    }
    .editBtnNone {
      background: none;
      color: #666666;
      border-color: #00C586;
      margin-right: 0.3vw
    }
  }
  .bindTitle {
    color: #333333;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
  }
  .bindBtn {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    ::v-deep .el-button--default {
      background: #EDF1F4;
      border-color: #EDF1F4;
      padding: 0.15rem 0.55rem
    }
    ::v-deep .el-button--success {
      background: #19B560;
      border-color: #19B560;
      padding: 0.15rem 0.55rem
    }
  }
  .bindLogo {
    margin: 30px auto 0 auto;
    > div {
      margin-top: 20px;
      display: flex;
      align-items: center;
      padding-left: 115px;
    }
    img {
      width: 0.22rem;
      margin-right: 0.1rem
    }
  }
}
::v-deep .el-dialog__title {
}
</style>
<style>
/* .el-dialog__header {
  background: #002a52;
  text-align: center;
} */
</style>
